import collectdata from "./collectdata.mjs";
import thin_render from "./thin_render.mjs";
import validate from "./validate.mjs";

export function dialog({ template, buttons = "close" }) {
  let container = document.body;
  let div = [];
  let _fn = {};
  let _this;
  let returnValue = {
    close: (fn) => {
      _fn["close"] = fn;
      return _this;
    },
  };

  buttons.split(/,/).forEach((button) => {
    console.log({ button });
    div.push({
      button: button,
      click: (e) => {
        console.log(e);
        let data = collectdata(e.sender.closest("dialog"));
        console.log({ button, _fn });
        if (button in _fn) {
          _fn[button](data);
        }
        if ("close" in _fn) _fn.close(data);
        container.removeChild(e.sender.closest("dialog"));
      },
    });

    returnValue[button] = (fn) => {
      _fn[button] = fn;
      return _this;
    };
  });

  function render() {
    console.log({ template, this: this });
    _this = this;
    let dialog = document.createElement("dialog");
    container.appendChild(dialog);
    dialog.showModal();
    thin_render(dialog, [template, { div }]);
    return this;
  }

  return render.call(returnValue);
}

export function confirm(template, data) {
  let container = document.body;
  let confirm, cancel, _this;
  function render() {
    console.log({ template, this: this });
    _this = this;
    let dialog = document.createElement("dialog");
    container.appendChild(dialog);
    dialog.showModal();
    if (data) dialog.thin_data = data;
    thin_render(dialog, [
      template,
      {
        div: [
          {
            button: "cancel",
            click: (e) => {
              if (cancel) cancel();
              container.removeChild(dialog);
            },
          },
          {
            button: "confirm",
            click: (e) => {
              validate({
                container: dialog,
                valid: () => {
                  let data = collectdata(dialog);
                  if (confirm) confirm(data);
                  container.removeChild(dialog);
                },
                invalid: () => {
                  e.done();
                },
              });
            },
          },
        ],
      },
    ]);
    return this;
  }

  return render.call({
    confirmed: (fn) => {
      confirm = fn;
      return _this;
    },
    cancelled: (fn) => {
      cancel = fn;
      return _this;
    },
  });
}

export function alert(template) {
  let container = document.body;
  let close, _this;
  function render() {
    // console.log({ template, this: this });
    _this = this;
    let dialog = document.createElement("dialog");
    container.appendChild(dialog);
    dialog.showModal();
    thin_render(dialog, [
      template,
      {
        div: [
          {
            button: "close",
            click: (e) => {
              if (close) close();
              container.removeChild(dialog);
            },
          },
        ],
      },
    ]);
    return this;
  }
  return render.call({
    close: (fn) => {
      close = fn;
      return _this;
    },
  });
}
